<template>
	<div class="box" :style="{'backgroundSize':`100% 100%`}">
		<div class='head' :style="{'backgroundSize':`100% 100%`}">
			<div style="display: flex;align-items: center;justify-content:space-between;padding:5px 40px 0 40px;">
				<div>{{times}}</div>
				<div>xxx生产线</div>
			</div>
			<div style="letter-spacing:16px;font-size:30px;font-weight:600;line-height:20px;">产线看板</div>
			<div class="trim" :style="{'backgroundSize':`100% 100%`}"></div>
		</div>
	    <div class="data" :style="{'backgroundSize':`100% 100%`}">
			<div class="bg-1" :style="{'backgroundSize':`100% 100%`}">
				<div style="color:#d9001b;font-size:16px;text-align: center;">待获取工单</div>
				<div style="color:#d9001b;font-weight:600;font-size:20px;text-align: center;margin-top:10px;">26</div>
			</div>
			<div class="bg-2" :style="{'backgroundSize':`100% 100%`}">
				<div style="color:#00ffff;font-size:16px;text-align: center;">已获取工单</div>
				<div style="color:#00ffff;font-weight:600;font-size:20px;text-align: center;margin-top:10px;">23</div>
			</div>
			<div class="bg-3" :style="{'backgroundSize':`100% 100%`}">
				<div style="color:#95f204;font-size:16px;text-align: center;">完成工单</div>
				<div style="color:#95f204;font-weight:600;font-size:20px;text-align: center;margin-top:10px;">5</div>
			</div>
			<div class="bg-4" :style="{'backgroundSize':`100% 100%`}">
				<div style="color:#f39923;font-size:16px;text-align: center;">待生产工单</div>
				<div style="color:#f39923;font-weight:600;font-size:20px;text-align: center;margin-top:10px;">18</div>
			</div>
			<div class="bg-4" :style="{'backgroundSize':`100% 100%`}">
				<div style="color:#f39923;font-size:16px;text-align: center;">待生产商品总数</div>
				<div style="color:#f39923;font-weight:600;font-size:20px;text-align: center;margin-top:10px;">12689</div>
			</div>
			<div class="bg-2" :style="{'backgroundSize':`100% 100%`}">
				<div style="color:#01e3e7;font-size:16px;text-align: center;">合格总数</div>
				<div style="color:#01e3e7;font-weight:600;font-size:20px;text-align: center;margin-top:10px;">6983</div>
			</div>
			<div class="bg-1" :style="{'backgroundSize':`100% 100%`}">
				<div style="color:#d9001b;font-size:16px;text-align: center;">不合格总数</div>
				<div style="color:#d9001b;font-weight:600;font-size:20px;text-align: center;margin-top:10px;">6983</div>
			</div>
	    	<div style="width:80px;">
	    		<Circle :progress="50" color="#62a208" text='50%' size='80'/>
	    		<div style="text-align: center;color:#fff;margin-top:6px;font-size:14px;">商品率</div>
	    	</div>
	    	<div style="width:80px;">
	    		<Circle :progress="90" color="#ff66ff" text='90%' size='80'/>
	    		<div style="text-align: center;color:#fff;margin-top:6px;font-size:14px;">生产总进度</div>
	    	</div>
	    </div>
		<div style="width:100%;padding:10px;">
			<el-table :data="tableData" height="500px"  :header-row-style="{background:'#02375a'}" >
			    <el-table-column fixed prop="proCode" label="生产工单编码"  width="120" align='center'/>
			    <el-table-column prop="shopCode" label="商品编码" width="120" align='center'/>
			    <el-table-column prop="shopName" label="商品名称"  width="120" align='center'/>
			    <el-table-column prop="model" label="规格型号"  align='center'/>
			    <el-table-column prop="workNum" label="工单数量"  align='center'/>
			    <el-table-column prop="proNum" label="已生产数量" width="120" align='center'/>
				<el-table-column prop="passNum" label="合格数量" align='center'/>
				<el-table-column prop="nopassNum" label="不合格数量" width="120" align='center'/>
				<el-table-column prop="lv" label="良品量" align='center'/>
				<el-table-column prop="plan" label="生产进度" align='center'/>
				<el-table-column label="工序进度" align='center' width="670px">
					<template #default="scope">
						<div style="display: flex;align-items: center;flex-wrap: wrap;">
							<div v-for="(item,index) in scope.row.process" :key="index" style="display: flex;align-items: center;margin-top:10px;">
								<div style="border:1px solid #fff;width:75px;border-radius:10px;">
									<div style="border-bottom:1px solid #fff;font-size:12px;">{{item.rate}}</div>
									<div style="font-size:12px;">{{item.text}}</div>
								</div>
								<div style="color:#999;" v-if="index!==scope.row.process.length-1">——></div>
							</div>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>	
</template>

<script>
	import Circle from "../../components/circle.vue"
	import { onMounted ,ref,reactive} from "vue";
	import { getprolineList } from "/@/api/production"
	export default{
		components:{
			Circle
		},
		setup(){
			 const times = ref('')
			 const formatTime=(time)=>{
			 			   return time < 10 ? `0${time}` : time
			 }
			 const getlist = ()=>{
				 getprolineList().then(res=>{
					 console.log('list',res);
				 })
			 }
			 const getTime=()=>{
			 			 const now = new Date()
			 			 const year = now.getFullYear()  //年
			 			 const month = now.getMonth() + 1 //月
			 			 const day = now.getDate()    //日
			 			 const hours = now.getHours()  //小时数
			 			 const minutes = now.getMinutes()  //分钟数
			 			 const seconds = now.getSeconds()  //秒数
			 			 const week = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"][now.getDay()]  //星期
			     times.value =  `${year}年${formatTime(month)}月${formatTime(day)}日 ${formatTime(hours)}:${formatTime(minutes)}:${formatTime(seconds)}   ${week}`
			 }
			 
			 const tableData = [
			   {
			     proCode:'scgo29898778',
			 			 shopCode:'B365986A',
			 			 shopName:'汽车PCB板',
			 			 model:'300x200',
			 			 workNum:'1000',
			 			 proNum:'600',
			 			 passNum:'590',
			 			 nopassNum:'10',
			 			 lv:'99.99%',
			 			 plan:'60%',
						 process:[
							 {
								rate:'0%',
								text:'绑定夹具'
							 },{
								 rate:'10%',
								 text:'渲染'
							 },{
								 rate:'20%',
								 text:'点胶'
							 },{
								 rate:'30%',
								 text:'测试'
							 },{
								 rate:'40%',
								 text:"测试22"
							 },{
								 rate:'50%',
								 text:'测试4342'
							 }
						 ]
			   },
			   {
			     proCode:'scgo29898778',
			   			 shopCode:'B365986A',
			   			 shopName:'汽车PCB板',
			   			 model:'300x200',
			   			 workNum:'1000',
			   			 proNum:'600',
			   			 passNum:'590',
			   			 nopassNum:'10',
			   			 lv:'99.99%',
			   			 plan:'60%',
						 process:[
						 							 {
						 								rate:'0%',
						 								text:'绑定夹具'
						 							 },{
						 								 rate:'10%',
						 								 text:'渲染'
						 							 },{
						 								 rate:'20%',
						 								 text:'点胶'
						 							 },{
						 								 rate:'30%',
						 								 text:'测试'
						 							 },{
						 								 rate:'40%',
						 								 text:"测试22"
						 							 },{
						 								 rate:'50%',
						 								 text:'测试4342'
						 							 }
						 ]
			   }, {
			     proCode:'scgo29898778',
			 			 shopCode:'B365986A',
			 			 shopName:'汽车PCB板',
			 			 model:'300x200',
			 			 workNum:'1000',
			 			 proNum:'600',
			 			 passNum:'590',
			 			 nopassNum:'10',
			 			 lv:'99.99%',
			 			 plan:'60%',
						 process:[
						 							 {
						 								rate:'0%',
						 								text:'绑定夹具'
						 							 },{
						 								 rate:'10%',
						 								 text:'渲染'
						 							 },{
						 								 rate:'20%',
						 								 text:'点胶'
						 							 },{
						 								 rate:'30%',
						 								 text:'测试'
						 							 },{
						 								 rate:'40%',
						 								 text:"测试22"
						 							 },{
						 								 rate:'50%',
						 								 text:'测试4342'
						 							 }
						 ]
			   }, {
			     proCode:'scgo29898778',
			 			 shopCode:'B365986A',
			 			 shopName:'汽车PCB板',
			 			 model:'300x200',
			 			 workNum:'1000',
			 			 proNum:'600',
			 			 passNum:'590',
			 			 nopassNum:'10',
			 			 lv:'99.99%',
			 			 plan:'60%',
						 process:[
						 							 {
						 								rate:'0%',
						 								text:'绑定夹具'
						 							 },{
						 								 rate:'10%',
						 								 text:'渲染'
						 							 },{
						 								 rate:'20%',
						 								 text:'点胶'
						 							 },{
						 								 rate:'30%',
						 								 text:'测试'
						 							 },{
						 								 rate:'40%',
						 								 text:"测试22"
						 							 },{
						 								 rate:'50%',
						 								 text:'测试4342'
						 							 }
						 ]
			   },{
			     proCode:'scgo29898778',
			 			 shopCode:'B365986A',
			 			 shopName:'汽车PCB板',
			 			 model:'300x200',
			 			 workNum:'1000',
			 			 proNum:'600',
			 			 passNum:'590',
			 			 nopassNum:'10',
			 			 lv:'99.99%',
			 			 plan:'60%',
						 process:[
						 							 {
						 								rate:'0%',
						 								text:'绑定夹具'
						 							 },{
						 								 rate:'10%',
						 								 text:'渲染'
						 							 },{
						 								 rate:'20%',
						 								 text:'点胶'
						 							 },{
						 								 rate:'30%',
						 								 text:'测试'
						 							 },{
						 								 rate:'40%',
						 								 text:"测试22"
						 							 },{
						 								 rate:'50%',
						 								 text:'测试4342'
						 							 }
						 ]
			   },{
			     proCode:'scgo29898778',
			 			 shopCode:'B365986A',
			 			 shopName:'汽车PCB板',
			 			 model:'300x200',
			 			 workNum:'1000',
			 			 proNum:'600',
			 			 passNum:'590',
			 			 nopassNum:'10',
			 			 lv:'99.99%',
			 			 plan:'60%',
						 process:[
						 							 {
						 								rate:'0%',
						 								text:'绑定夹具'
						 							 },{
						 								 rate:'10%',
						 								 text:'渲染'
						 							 },{
						 								 rate:'20%',
						 								 text:'点胶'
						 							 },{
						 								 rate:'30%',
						 								 text:'测试'
						 							 },{
						 								 rate:'40%',
						 								 text:"测试22"
						 							 },{
						 								 rate:'50%',
						 								 text:'测试4342'
						 							 }
						 ]
			   },{
			     proCode:'scgo29898778',
			 			 shopCode:'B365986A',
			 			 shopName:'汽车PCB板',
			 			 model:'300x200',
			 			 workNum:'1000',
			 			 proNum:'600',
			 			 passNum:'590',
			 			 nopassNum:'10',
			 			 lv:'99.99%',
			 			 plan:'60%',
						 process:[
						 							 {
						 								rate:'0%',
						 								text:'绑定夹具'
						 							 },{
						 								 rate:'10%',
						 								 text:'渲染'
						 							 },{
						 								 rate:'20%',
						 								 text:'点胶'
						 							 },{
						 								 rate:'30%',
						 								 text:'测试'
						 							 },{
						 								 rate:'40%',
						 								 text:"测试22"
						 							 },{
						 								 rate:'50%',
						 								 text:'测试4342'
						 							 }
						 ]
			   },{
			     proCode:'scgo29898778',
			 			 shopCode:'B365986A',
			 			 shopName:'汽车PCB板',
			 			 model:'300x200',
			 			 workNum:'1000',
			 			 proNum:'600',
			 			 passNum:'590',
			 			 nopassNum:'10',
			 			 lv:'99.99%',
			 			 plan:'60%',
						 process:[
						 							 {
						 								rate:'0%',
						 								text:'绑定夹具'
						 							 },{
						 								 rate:'10%',
						 								 text:'渲染'
						 							 },{
						 								 rate:'20%',
						 								 text:'点胶'
						 							 },{
						 								 rate:'30%',
						 								 text:'测试'
						 							 },{
						 								 rate:'40%',
						 								 text:"测试22"
						 							 },{
						 								 rate:'50%',
						 								 text:'测试4342'
						 							 }
						 ]
			   }
			 ]
			 onMounted(()=>{
				  getTime()	 
				   getlist()
			 })
			return{
				times,
				tableData
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .el-scrollbar__bar {
	  opacity: 1; /* 使滚动条不透明 */
	}

	::v-deep .el-scrollbar__bar.is-horizontal .el-scrollbar__thumb {
	  border-radius: 1px; /* 滑块的圆角 */
	  background-color:#fff; /* 滑块的背景颜色 */
	  box-shadow: 0 0 6px rgba(0, 0, 0, 0.15); /* 滑块的阴影 */
	}
	::v-deep .el-table.is-scrolling-left th.el-table-fixed-column--left{
		background-color: transparent !important;
	}
	::v-deep .el-table__header-wrapper tr th.el-table-fixed-column--left{
		background-color: transparent !important;
	}
	::v-deep .el-table tbody tr:hover>td {
	   background:#02375a !important;
	}
	.el-table::before {
	  height: 0px;
	}
	
	::v-deep .el-table,
	::v-deep .el-table__expanded-cell {
	  background-color: transparent;
	}
	::v-deep .el-table th,
	::v-deep .el-table tr,
	::v-deep .el-table td {
	  background-color: transparent;
	  color: #fff;
	}
	.box{
		background-image: url(../../assets/version/bg.png);
		background-repeat: no-repeat;
		width: 100%;
	}
	.bg{
		background-image:url(../../assets/version/kuang.png);
		padding:20px 10px 0 10px;
		background-color:#021333;
		background-repeat: no-repeat;
	}
	.head{
		background-image: url(../../assets/version/head.png);
		text-align: center;
		height:60px;
		color: #fff;
		background-repeat: no-repeat;
		position: relative;
		left: 0;
		top: 0;
		z-index: 4;
	}
	.trim{
		background-image: url(../../assets/version/head1.png);
		background-repeat: no-repeat;
		position: absolute;
		left: 50%;
		margin-left:-22.5%;
		top:0px;
		width:45%;
		height: 100px;
		z-index:2;
	}
	.data{
		background-image: url(../../assets/version/kuang2.png);
		background-repeat: no-repeat;
		margin:10px;
		padding:10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.bg-1{
		background-image:url(../../assets/version/red.png);
		background-repeat: no-repeat;
		width:10%;
		padding:10px;
	}
	.bg-2{
		background-image:url(../../assets/version/blue.png);
		background-repeat: no-repeat;
		width:10%;
		padding:10px;
	}
	.bg-3{
		background-image:url(../../assets/version/green.png);
		background-repeat: no-repeat;
		width:10%;
		padding:10px;
	}
	.bg-4{
		background-image:url(../../assets/version/yellow.png);
		background-repeat: no-repeat;
		width:10%;
		padding:10px;
	}
</style>